<template>
	<view class="zh-service-stock">
		<view class="title">
			<text>仓库介绍</text>
		</view>
		<view class="content display-flex">
			<view>
				<text class="point"></text>
			</view>
			<view class="item">
				<text class="des" user-select>{{ des }}</text>
				<image :src="IMG_URL + imgPath1" class="des-img"/>
				<image :src="IMG_URL + imgPath2" class="des-img"/>
			</view>
		</view>
		<view class="title">
			<text>地理位置</text>
		</view>
		<view class="content display-flex">
			<view>
				<text class="point"></text>
			</view>
			<view class="item">
				<text class="des" user-select>{{ locationDes }}</text>
				<map :latitude="latitude" :longitude="longitude" :scale="16" :markers="markers" class="map" @tap="clickMap"></map>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import { util } from '@/utils'
	import iconPath from '@/static/icons/address_icon.png'
	import { onLoad } from '@dcloudio/uni-app';
	
	import { IMG_URL } from '@/utils/constant'
	const latitude = ref('')
	const longitude = ref('')
	const address= ref('')
	const markers = ref([])
	const title = ref('')
	const des = ref('')
	const locationDes = ref('')
	const imgPath1 = ref('')
	const imgPath2 = ref('')
	
	const zhlbcData = reactive({
		title:'中恒塱宝仓',
		des:'中恒塱宝仓是我司与全国针织重地张槎镇政府合力建设的纺织品智能化仓储物流中心。仓库主营纱线，为两栋4层的高标准仓库，层高超6米，建筑面积8万平方米，具备丙类消防资质。仓库上线我司自主研发的智慧云仓管理系统，满足客户在线办单和实时跟踪仓储情况；仓库采用了先进的物联网技术硬件，有效地提高作业效率和准确性，保证货物安全。',
		locationDes:'中恒塱宝仓位处广东省佛山市禅城区张槎街道，距离广州仅20公里，地理位置优越，交通便利。',
		imgPath1:'/service/stock/zhlbc/1.png',
		imgPath2:'/service/stock/zhlbc/2.png'
	})
	const qyltcData = reactive({
		title:'清远龙塘仓',
		des:'清远龙塘仓主营棉纱，建筑为4层高的高标准仓库，平均层高6米，总建筑面积达1万平方米。具有丙类消防资质。每层仓库均配置完善的大数据视频监控平台、VR巡库、电子围栏，通过物联网监控平台保障货物的安全。仓库配备仓管、物流、安保等岗位人员，为客户提供优质的一站式仓储物流服务。',
		locationDes:'清远龙塘仓项目位于清远高新区银源工业区，毗邻广州和佛山，仓库紧邻京广铁路清远站、清远港、武广清远高铁站、广清城际，交通便捷。',
		imgPath1:'/service/stock/qyltc/1.png',
		imgPath2:'/service/stock/qyltc/2.png'
	})
	const sdlccData = reactive({
		title:'顺德乐从仓',
		des:'顺德乐从仓主营棉纱，仓库为一栋6层高的高标准仓库，层高超6米，建筑面积达1.6万平方米，具备丙类消防资质，仓库内配备有完善的消防设施和管理制度，确保货物安全。仓库以纱线仓储和配送为中心，为客户提供一站式物流服务。',
		locationDes:'顺德乐从仓位于佛山市顺德区乐从镇，距离高明港、九江港不足20公里，距三水港仅30公里。毗邻禅西大道，交通便利。',
		imgPath1:'/service/stock/sdlcc/1.png',
		imgPath2:'/service/stock/sdlcc/2.png'
	})
	const sschcData = reactive({
		title:'三水传化仓',
		des:'三水传化仓主营棉纱，仓库为高标准单层平台库，层高最低12米，最高15米，仓库空地面积大，可同时进行多辆大车正常装卸运作，具备丙类消防资质。仓库采用我司自主研发的智慧云仓管理系统，满足客户在线办单和实时跟踪仓储情况；仓库采用了先进的物联网设备，保证货物安全和作业高效。',
		locationDes:'三水传化仓项目位于佛山市三水区西南街道进港大道9号，紧临着三水港码头，毗邻广昆高速公路，仓库周边交通便利。',
		imgPath1:'/service/stock/sschc/1.png',
		imgPath2:'/service/stock/sschc/2.png'
	})
	const xhfscData = reactive({
		title:'新会福盛仓',
		des:'新会福盛仓主营棉纱，仓库为一栋单层的高标准仓，层高超6米，总建筑面积达3000平方米。具备丙类消防资质。仓库上线我司自主研发的智慧云仓管理系统，满足客户在线办单和实时跟踪仓储情况；仓库采用了先进的物联网设备，保证货物安全和作业高效',
		locationDes:'新会福盛仓项目位于江门市新会区会城镇，毗邻新会码头、广佛江珠高速、深岑高速等运输要道，交通便利、地理位置优越。',
		imgPath1:'/service/stock/xhfsc/1.png',
		imgPath2:'/service/stock/xhfsc/2.png'
	})
	const xqybcData = reactive({
		title:'西樵亿邦仓',
		des:'西樵亿邦仓主营棉纱，仓库为一栋高四层的高标准仓库，仓库总建筑面积达3.5万平方米，具备丙类消防资质。仓库上线我司自主研发的智慧云仓管理系统，满足客户在线办单和实时跟踪仓储情况；仓库采用了先进的物联网设备，保证货物安全和作业高效。',
		locationDes:'西樵亿邦仓项目位于广东佛山南海西樵纺织产业基地内，距离高明港码头，三水港码头，九江港码头仅20公里，毗邻广明高速公路及沈海高速公路，地理位置优越，交通便利。',
		imgPath1:'/service/stock/xqybc/1.png',
		imgPath2:'/service/stock/xqybc/2.png'
	})
	const ccnzcData = reactive({
		title:'禅城南庄仓',
		des:'禅城南庄仓主营棉纱，建筑面积达1.1万平方米，具备丙类消防资质，仓库上线我司自主研发的智慧云仓管理系统，满足客户实时跟踪仓储情况；仓库采用了先进的物联网设备，保证货物安全和作业高效。',
		locationDes:'禅城南庄仓项目位于佛山市禅城区南庄镇，距高明港仅15公里，距三水港、九江港也仅20公里。毗邻佛山一环高速公路、广明高速公路，地理位置优越，交通环境便利。',
		imgPath1:'/service/stock/ccnzc/1.png',
		imgPath2:'/service/stock/ccnzc/2.png'
	})
	const zqshcData = reactive({
		title:'肇庆四会仓',
		des:'肇庆四会仓主营棉纱，建筑为一栋单层的高标准仓库，总建筑面积达107561平方米，可租赁面积达12000平方米，具备丙二类消防资质。仓库上线我司自主研发的智慧云仓管理系统，满足客户在线办单和实时跟踪仓储情况；仓库采用了先进的物联网设备，保证货物安全和作业高效。',
		locationDes:'肇庆四会项目位于广东肇庆四会市大沙镇马房工业区附近。毗邻321国道、二广高速、四会港5公里、中外运三水港，交通便利，地理位置优越。',
		imgPath1:'/service/stock/zqshc/1.png',
		imgPath2:'/service/stock/zqshc/2.png'
	})
	
	onLoad((options:any) => {
		const info = util.getObjParams(options.info)
		const data = info[0]
		uni.setNavigationBarTitle({
			title:data.title
		})
		markers.value = info
		latitude.value = data.latitude
		longitude.value = data.longitude
		address.value = data.address
		if(data.title === '中恒塱宝仓') {
			title.value = zhlbcData.title
			des.value = zhlbcData.des
			locationDes.value = zhlbcData.locationDes
			imgPath1.value = zhlbcData.imgPath1
			imgPath2.value = zhlbcData.imgPath2
		} else if(data.title === '顺德乐从仓') {
			title.value = sdlccData.title
			des.value = sdlccData.des
			locationDes.value = sdlccData.locationDes
			imgPath1.value = sdlccData.imgPath1
			imgPath2.value = sdlccData.imgPath2
		} else if(data.title === '禅城南庄仓') {
			title.value = ccnzcData.title
			des.value = ccnzcData.des
			locationDes.value = ccnzcData.locationDes
			imgPath1.value = ccnzcData.imgPath1
			imgPath2.value = ccnzcData.imgPath2
		} else if(data.title === '西樵亿邦仓') {
			title.value = xqybcData.title
			des.value = xqybcData.des
			locationDes.value = xqybcData.locationDes
			imgPath1.value = sdlccData.imgPath1
			imgPath2.value = sdlccData.imgPath2
		} else if(data.title === '三水传化仓') {
			title.value = sschcData.title
			des.value = sschcData.des
			locationDes.value = sschcData.locationDes
			imgPath1.value = sschcData.imgPath1
			imgPath2.value = sschcData.imgPath2
		} else if(data.title === '新会福盛仓') {
			title.value = xhfscData.title
			des.value = xhfscData.des
			locationDes.value = xhfscData.locationDes
			imgPath1.value = xhfscData.imgPath1
			imgPath2.value = xhfscData.imgPath2
		} else if(data.title === '清远龙塘仓') {
			title.value = qyltcData.title
			des.value = qyltcData.des
			locationDes.value = qyltcData.locationDes
			imgPath1.value = qyltcData.imgPath1
			imgPath2.value = qyltcData.imgPath2
		} else if(data.title === '肇庆四会仓') {
			title.value = zqshcData.title
			des.value = zqshcData.des
			locationDes.value = zqshcData.locationDes
			imgPath1.value = zqshcData.imgPath1
			imgPath2.value = zqshcData.imgPath2
		}
	})
	
	const clickMap = () => {
		uni.openLocation({
			latitude: Number(latitude.value),
			longitude: Number(longitude.value),
			name:title.value,
			address:address.value,
			success:() => {
				
			}
		})
		// const params = util.setObjParams(markers.value)
		// navigateTo('/pages/userCenter/map?info=' + params)
	}
	
	const navigateTo = (url:string) => {
		uni.navigateTo({url:url})
	}
</script>

<style lang="scss" scoped>
	.zh-service-stock {
		padding:80rpx 36rpx 90rpx;
		.title {
			position:relative;
			&::before {
				content:'';
				position:absolute;
				bottom:0;
				left:0;
				width:233rpx;
				height:16rpx;
				background-color:#D6F0FB;
			}
			text {
				font-size:48rpx;
				color:#202020;
				font-weight:bold;
				position:relative;
				display:inline-block;
			}
		}
		.content {
			margin:40rpx 43rpx 99rpx 0;
			.point {
				display: block;
				width:16rpx;
				height:16rpx;
				background-color: #04B5FF;
				border-radius: 8rpx;
			}
			.item {
				padding-left:35rpx;
				margin-left:-8rpx;
				border-left:1rpx dotted #04B5FF;
				.des-img {
					width:585rpx;
					height:321rpx;
					margin-top: 30rpx;
				}
			}
			.map {
				margin-top:30rpx;
				width:100%;
			}
		}
	}
</style>
